<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">水印工具</text>
      <text class="subtitle">为您的图片添加个性化水印</text>
    </view>

    <!-- 图片选择区域 -->
    <view class="card">
      <view class="image-section">
        <view v-if="!selectedImage" class="image-placeholder" @click="chooseImage">
          <text class="placeholder-text">点击选择图片</text>
          <text class="placeholder-subtext">支持 JPG、PNG 格式</text>
        </view>
        <image 
          v-else 
          :src="selectedImage" 
          class="selected-image" 
          mode="aspectFit"
          @click="chooseImage"
        />
      </view>
      
      <view class="button-group">
        <button class="btn-primary" @click="chooseImage">
          {{ selectedImage ? '重新选择' : '选择图片' }}
        </button>
        <button 
          v-if="selectedImage" 
          class="btn-secondary" 
          @click="goToEditor"
        >
          添加水印
        </button>
      </view>
    </view>

    <!-- 功能说明 -->
    <view class="card">
      <text class="section-title">功能介绍</text>
      <view class="feature-list">
        <view class="feature-item">
          <text class="feature-icon">📷</text>
          <text class="feature-text">选择本地图片</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">⏰</text>
          <text class="feature-text">自动生成时间水印</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📍</text>
          <text class="feature-text">自动添加位置信息</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🏠</text>
          <text class="feature-text">GPS坐标转地址</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✏️</text>
          <text class="feature-text">自定义水印文字</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🎨</text>
          <text class="feature-text">调整水印样式</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">💾</text>
          <text class="feature-text">保存到相册</text>
        </view>
      </view>
    </view>

    <!-- 使用提示 -->
    <view class="card">
      <text class="section-title">使用提示</text>
      <view class="tip-list">
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">选择图片后会自动生成包含时间和地址信息的默认水印</text>
        </view>
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">默认水印位置为左下角，白色字体</text>
        </view>
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">GPS坐标会自动转换为可读的地址信息</text>
        </view>
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">可以随时修改水印内容和样式</text>
        </view>
      </view>
    </view>

    <!-- API配置提示 -->
    <view class="card">
      <text class="section-title">配置说明</text>
      <view class="config-tip">
        <text class="config-icon">⚙️</text>
        <text class="config-text">如需使用地址转换功能，请在 config/api.js 中配置高德地图API密钥</text>
      </view>
      <view class="config-link">
        <text class="link-text">申请地址：</text>
        <text class="link-url">https://lbs.amap.com/</text>
      </view>
    </view>

    <!-- 最近处理 -->
    <view v-if="recentImages.length > 0" class="card">
      <text class="section-title">最近处理</text>
      <scroll-view class="recent-list" scroll-x="true">
        <view 
          v-for="(item, index) in recentImages" 
          :key="index"
          class="recent-item"
          @click="loadRecentImage(item)"
        >
          <image :src="item.thumbnail" class="recent-thumbnail" mode="aspectFill" />
          <text class="recent-text">{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedImage: '',
      recentImages: []
    }
  },
  
  onLoad() {
    this.loadRecentImages()
  },
  
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log('图片选择成功:', res)
          
          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            this.selectedImage = res.tempFilePaths[0]
            console.log('选择的图片路径:', this.selectedImage)
            
            uni.showToast({
              title: '图片选择成功',
              icon: 'success'
            })
          } else {
            console.error('未获取到图片路径')
            uni.showToast({
              title: '图片路径获取失败',
              icon: 'error'
            })
          }
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({
            title: '选择图片失败',
            icon: 'error'
          })
        }
      })
    },
    
    // 跳转到编辑器
    goToEditor() {
      if (!this.selectedImage) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        })
        return
      }
      
      console.log('跳转到编辑器，图片路径:', this.selectedImage)
      
      // 验证图片路径
      if (typeof this.selectedImage !== 'string' || this.selectedImage.trim() === '') {
        uni.showToast({
          title: '图片路径无效',
          icon: 'error'
        })
        return
      }
      
      const encodedImage = encodeURIComponent(this.selectedImage)
      console.log('编码后的图片路径:', encodedImage)
      
      uni.navigateTo({
        url: `/pages/editor/editor?image=${encodedImage}`,
        success: () => {
          console.log('页面跳转成功')
        },
        fail: (err) => {
          console.error('页面跳转失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'error'
          })
        }
      })
    },
    
    // 加载最近处理的图片
    loadRecentImages() {
      try {
        const recent = uni.getStorageSync('recentImages') || []
        this.recentImages = recent.slice(0, 5) // 只显示最近5张
      } catch (e) {
        console.error('加载最近图片失败:', e)
      }
    },
    
    // 加载最近图片
    loadRecentImage(item) {
      this.selectedImage = item.path
      this.goToEditor()
    }
  }
}
</script>

<style scoped>
.header {
  text-align: center;
  padding: 40rpx 0;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.image-section {
  margin-bottom: 30rpx;
}

.image-placeholder {
  width: 100%;
  height: 400rpx;
  background-color: #f5f5f5;
  border: 2rpx dashed #ddd;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.placeholder-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.placeholder-subtext {
  font-size: 24rpx;
  color: #ccc;
}

.selected-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
}

.button-group {
  display: flex;
  gap: 20rpx;
}

.button-group button {
  flex: 1;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.feature-icon {
  font-size: 32rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #666;
}

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 15rpx;
}

.tip-icon {
  font-size: 28rpx;
  margin-top: 2rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  flex: 1;
}

.config-tip {
  display: flex;
  align-items: flex-start;
  gap: 15rpx;
  margin-bottom: 15rpx;
}

.config-icon {
  font-size: 28rpx;
  margin-top: 2rpx;
}

.config-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  flex: 1;
}

.config-link {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.link-text {
  font-size: 26rpx;
  color: #666;
}

.link-url {
  font-size: 26rpx;
  color: #007AFF;
  text-decoration: underline;
}

.recent-list {
  white-space: nowrap;
}

.recent-item {
  display: inline-block;
  margin-right: 20rpx;
  text-align: center;
  width: 150rpx;
}

.recent-thumbnail {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.recent-text {
  font-size: 24rpx;
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 